<template>
  <div>
    <img src="static/imgs/headbg.png" style="width: 100%">
    <div style = "position: absolute;top: 10px;left:20px;color: white;font-weight: bold;font-size: 24px;">{{title}}</div>
    <div style = "position: absolute;top: 10px;left:500px;display: flex;flex-direction: row">
      <div v-for="(item,index) in menus" :key="index" style="margin-top: 20px;margin-left: 20px" :class="{'normal':select!=item.id,'active':select==item.id}"
      @click="menuSelect(item)">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      title:"上海江浦路隧道智慧防灾系统",
      menus:[
        {id:"func1",name:"环境感知"},
        {id:"func2",name:"状态评估"},
        {id:"func3",name:"通风控制"},
        {id:"func4",name:"预案推演"},
        {id:"func5",name:"应急救援"},
        {id:"func6",name:"知识库"},
        {id:"func7",name:"系统设置"},
      ],
      select:"func1"
    }
  },
  created() {
  },
  mounted() {
  },
  methods:{
    menuSelect(item){
      this.select = item.id;
      console.log("select menu",this.select);
      this.$emit("menuSelect",this.select);
    }
  }
}
</script>
<style>
.normal{
  color: white;
}
.active{
  color:orange;
}
</style>

